/*
 * @Author jiangzhiwei
 * @Date 2023-07-20 15:38:07
 * @LastEditors jiangzhiwei
 * @LastEditTime 2023-07-28 11:27:26
 * @FilePath \test-cron\src\components\yc-cron\components\base\common-checkbox\index.js
 * @Description 
 */
import { defineComponent } from 'vue-demi'
import { getSlot, getComponetName, emitValue } from '../../../utils/componentutil'
import { VALUE_NAME } from '../../../utils/constant'
import { h } from '../../../utils/domutil'
import './checkbox.css'

const NAME = 'yc-cron-checkbox'

export default defineComponent({
  name: NAME,
  props: {
    value: {
      type: [String, Number, Boolean],
      default: undefined
    },
    modelValue: {
      type: [String, Number, Boolean],
      default: undefined
    },
    label: {
      type: [String, Number, Boolean],
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: undefined
    }
  },
  data () {
    return {
      /** 是否处于按下状态 */
      isPressed: false,
      /** 本次按下行为是否已经点击了 */
      isClicked: false,
      /** 本次行为是否是延迟执行的 */
      isDelayAction: false,
      /** 延迟行为的timeout的id */
      pointerEventTimeout: undefined,
      /** 延迟行为的时间 */
      timeoutDelay: 300
    }
  },
  methods: {
    /** 按下鼠标开始模拟延迟点击 */
    onPointerdown () {
      this.isPressed = true
      this.isClicked = false
      if (this.pointerEventTimeout) {
        window.clearTimeout(this.pointerEventTimeout)
        this.pointerEventTimeout = undefined
      }
      this.pointerEventTimeout = window.setTimeout(this.delayAction, this.timeoutDelay)
    },
    /** 松开鼠标 */
    onPointerup () {
      if (this.pointerEventTimeout) {
        window.clearTimeout(this.pointerEventTimeout)
        this.pointerEventTimeout = undefined
      }
      if (!this.isClicked && this.isPressed) { // 按下了鼠标 且 还没有模拟点击
        this.doClick()
      }
      this.isPressed = false
    },
    /** 移动鼠标。涉及多选效果 */
    onPointermove () {
      this.$parent.onPointermove(this.label)
    },
    /** 延迟点击效果 */
    delayAction () {
      this.isDelayAction = true
      this.doClick()
      this.isDelayAction = false
    },
    /** 模拟点击效果 */
    doClick () {
      this.isClicked = true
      let checked
      if (this.isParentGroup()) { // 如果父级是组
        checked = this.$parent[VALUE_NAME].includes(this.label)
        this.$parent.updateValue(this.label, !checked)
        if (this.isDelayAction) { // 如果是延迟执行
          this.$parent.startMultiCheck(this.label, !checked)
        }
      } else {
        checked = this[VALUE_NAME]
        emitValue(this, !checked)
      }
    },
    /** 父级是否是group */
    isParentGroup () {
      const parentName = getComponetName(this.$parent)
      return parentName === 'yc-cron-checkbox-group'
    },
    /** 获取勾选状态 */
    getChecked () {
      let checked
      if (this.isParentGroup()) { // 如果父级是组
        checked = this.$parent[VALUE_NAME].includes(this.label)
      } else {
        checked = this[VALUE_NAME]
      }
      return checked
    }
  },
  render () {
    const checked = this.getChecked()
    return h(
      'article',
      {
        class: { [NAME]: true, 'is-checked': checked },
        on: {
          pointerdown: e => this.onPointerdown(e, 'top'),
          pointerup: this.onPointerup,
          pointermove: this.onPointermove
        }
      },
      [
        h(
          'input',
          {
            attrs: { type: 'checkbox', name: this.name, value: this.label },
            domProps: { checked }
          }
        ),
        h(
          'span',
          { class: `${NAME}__item` }
        ),
        h(
          'span',
          { class: `${NAME}__label` },
          getSlot(this)
        )
      ]
    )
  }
})